<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="div" >  </div>
    <input id="input"/>
    <script>
        let input = document.getElementById("input")
        let div = document.getElementById("div")
        
        window.onscroll = bar(() => {
            console.log("in", '123')
            
        }, 1000)

        input.oninput = foo( function(e) {
            console.log("in", this.value)
            
        }, 1000)

        // window.onscroll = function() {
        //     console.log("--")
        // }   防抖的实现



        function bar(fn, delay) {
            let flag = true
            return function () {
                if(flag) {
                    setTimeout(() => {
                        fn.call(this)
                        flag = true
                    }, delay)
                }
                flag = false
            }
        }

        function foo(fn, delay) {
            // 1.记录上一次的开始时间
            let lastTime = 0
            // 2.事件触发时，真正执行的函数
            return function() {
                // 2.1获取当前事件触发时的事件
                const nowTime = new Date().getTime()
        // console.log("---", nowTime)
                // 2.2 使用当前触发的时间和之前的时间间隔以及上一次开始的时间，计算出还剩余多长时间需要去触发函数
                const remainTime = delay - (nowTime - lastTime)
        console.log("&&&&&&", nowTime - lastTime)
                // console.log("传过来的初始时间：", delay, "毫秒数：", nowTime,  "计算结果", remainTime);
                if(remainTime <= 0) {
            console.log("**", remainTime)
                    // 2.3 真正触发函数
                    fn.call(this)
                    // 2.4 保留上一次触发的时间 
                    lastTime = nowTime
                }
            }
        }

    </script>
</body>
</html>